公众号悬浮二维码 /* 外层容器 */ .social-share { display: flex; gap: 20px; padding: 10px; max-width: 100%; width: fit-content; margin: auto auto; } /* 单个图标项 */ .share-item { position: relative; width: 200px; height: 34px; cursor: pointer; } /* 图标盒子 */ .share-icon-box { position: relative; width: 100%; height: 100%; } /* 图标叠放，保持原图样式 */ .icon-default, .icon-hover { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: contain; transition: opacity 0.3s ease; } /* 默认隐藏hover图标 */ .icon-hover { opacity: 0; } /* 悬浮切换图标 */ .share-item:hover .icon-default { opacity: 0; } .share-item:hover .icon-hover { opacity: 1; }